<template>
    <title-box title="设备列表">
        <BasicTable ref="tableRef" :params="params" :columns="columns" :query="query" :selectbox="false">
            <template #table="{ body }">
                <template v-if="body.column.key === 'no'">
                    <span class="name" @click="onClick(body.record.id)">{{ body.record.no }}</span>
                </template>
                <template v-if="body.column.key === 'shelfLife'"> {{ body.record.shelfLife }}月 </template>
                <template v-if="body.column.key === 'status'">
                    <a-tag v-if="body.record.status === 0" color="processing">正常</a-tag>
                    <a-tag v-if="body.record.status === 1" color="warning">告警</a-tag>
                    <a-tag v-if="body.record.status === 2" color="error">离线</a-tag>
                </template>
            </template>
        </BasicTable>
    </title-box>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import TitleBox from '/@/components/TitleBox/index.vue'
import { BasicTable } from '@iframe/tools/components'
import { query } from '/@/api/Inverter/Devices/index.js'

const props = defineProps({
    stationId: {
        type: Number
    }
})
const router = useRouter()
const tableRef = ref()
const params = reactive({
    stationId: props.stationId
})

const columns = [
    {
        title: '序列号',
        dataIndex: 'no',
        key: 'no',
        align: 'center'
    },
    {
        title: '设备编号',
        dataIndex: 'code',
        key: 'code',
        align: 'center'
    },
    {
        title: '出厂日期',
        dataIndex: 'productionDate',
        key: 'productionDate',
        align: 'center'
    },
    {
        title: '保质期',
        dataIndex: 'shelfLife',
        key: 'shelfLife',
        align: 'center'
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 160
    }
]

watch(
    () => props.stationId,
    () => {
        tableRef.value.handleRefresh()
    }
)
const onClick = id => {
    router.push(`/inverter/devices/info?id=${id}`)
}
</script>
<style lang="less" scoped>
.name {
    color: #1677ff;
    cursor: pointer;
}
</style>
